<template>
  <div class="attack-process-container" v-loading="cardLoading" @scroll="handleScroll">
    <Empty v-if="!cardLoading && !cardData.length"></Empty>
    <el-collapse v-else v-model="collapseActive" accordion class="coll-card-content" @change="collapseChange">

      <el-timeline>

        <el-timeline-item color='#409EFF' v-for="(item, index) in cardData">

          <el-collapse-item :name="index + 1">
            <template slot="title">
              <div class="left-box">
                <div class="time">最后攻击时间: {{ item.lastTime }}</div>
                <div class="way">
                  <div class="speak"> {{ item.eventType }}</div>
                  <div style="color: #969696">
                    涉及
                    <span style="color: #000"> {{ item.ip }}(服务器) </span>等
                    <span style="color: #409EFF">{{ item.detectionReasonNum }}</span>
                    个受害资产
                  </div>
                </div>
              </div>
              <div class="num">
                攻击次数：{{ item.detectionNum }}
              </div>
              <div class="success-num">
                <el-tag type="danger" size="normal" color="#E62828" effect="dark">成功 {{
                    item.successDetectionNum
                  }}
                </el-tag>
              </div>
              <div class="unfold">展开</div>
            </template>
            <div class="card-list-box" v-loading="listLoading">
              <Empty v-if="!listLoading && !listData.length"></Empty>

              <ul class="list-detail-box" v-else>
                <li class="list-item" v-for="info in listData">
                  <div class="level">
                    <div class="num">攻击:{{ info.detectionNum }}</div>
                    <el-tag type="warning" size="small" effect="dark">中危</el-tag>
                  </div>
                  <div class="course">
                    <div class="left-ip">
                      <span>{{ info.attackIp }}</span>
                      <span>({{ info.attackDistrict }})</span>
                    </div>
                    <div class="trait">
                      <div>{{ info.trait }}</div>
                      <div class="arrow"><i class="el-icon-right"></i></div>
                      <div :style="{color: info.attackStatus ? 'red' : '#e6a23c'}">{{
                          info.attackStatus ? '成功' : '尝试'
                        }}
                      </div>
                    </div>
                    <div class="suffer">
                      <div class="image">
                        <img :src="imgSrc" alt="">
                        <span>{{ info.sufferType }}</span>
                      </div>
                      <div>{{ info.sufferIp }}</div>
                    </div>
                  </div>
                </li>
                <li style="margin-top: 20px; text-align: right">
                  <el-pagination
                      background
                      @current-change="currentChangeHandle"
                      :current-page="paging"
                      :page-size="limit"
                      :total="total"
                      layout="total, prev, pager, next"
                  ></el-pagination>
                </li>
              </ul>

            </div>
          </el-collapse-item>

        </el-timeline-item>

      </el-timeline>

    </el-collapse>
  </div>
</template>

<script>

const mockData = [
  {
    id: 1,
    lastTime: '2024年7月9日18:34:36', // 最新检出
    eventType: '勒索软件', // 攻击方式
    detectionReasonNum: 10, // 受害资产数
    ip: '192.168.1.1',
    detectionNum: 10, // 攻击次数
    successDetectionNum: 10, // 成功次数
  },
  {
    id: 2,
    lastTime: '2024年7月1日18:34:36', // 最新检出
    eventType: '木马', // 攻击方式
    detectionReasonNum: 1, // 受害资产数
    ip: '192.168.1.1',
    detectionNum: 1, // 攻击次数
    successDetectionNum: 1, // 成功次数
  },
  {
    id: 1,
    lastTime: '2024年7月9日18:34:36', // 最新检出
    eventType: '勒索软件', // 攻击方式
    detectionReasonNum: 10, // 受害资产数
    ip: '192.168.1.1',
    detectionNum: 10, // 攻击次数
    successDetectionNum: 10, // 成功次数
  },
  {
    id: 2,
    lastTime: '2024年7月1日18:34:36', // 最新检出
    eventType: '木马', // 攻击方式
    detectionReasonNum: 1, // 受害资产数
    ip: '192.168.1.1',
    detectionNum: 1, // 攻击次数
    successDetectionNum: 1, // 成功次数
  },
  {
    id: 1,
    lastTime: '2024年7月9日18:34:36', // 最新检出
    eventType: '勒索软件', // 攻击方式
    detectionReasonNum: 10, // 受害资产数
    ip: '192.168.1.1',
    detectionNum: 10, // 攻击次数
    successDetectionNum: 10, // 成功次数
  },
  {
    id: 2,
    lastTime: '2024年7月1日18:34:36', // 最新检出
    eventType: '木马', // 攻击方式
    detectionReasonNum: 1, // 受害资产数
    ip: '192.168.1.1',
    detectionNum: 1, // 攻击次数
    successDetectionNum: 1, // 成功次数
  }
];
const mockListData = [
  {
    detectionNum: 20, // 攻击次数
    warnLevel: '中危', // 危险等级 0 1 2 3 4 5
    attackStatus: 0, //0 尝试 1 成功
    attackIp: '192.168.1.1', // 攻击IP
    attackDistrict: '美国', // 攻击地区
    trait: '僵尸网络Mir - 上线特征', // 僵尸网络Mir - 上线特征
    sufferType: '路由器', // 受害类型
    sufferIp: '192.168.1.2' // 受害IP
  },
  {
    detectionNum: 12, // 攻击次数
    warnLevel: '中危', // 危险等级 0 1 2 3 4 5
    attackStatus: 1, //0 尝试 1 成功
    attackIp: '192.168.1.111', // 攻击IP
    attackDistrict: '美国', // 攻击地区
    trait: '僵尸网络Mir - 上线特征', // 僵尸网络Mir - 上线特征
    sufferType: '服务器', // 受害类型
    sufferIp: '192.168.1.212' // 受害IP
  }
];
import Empty from '@/components/Empty.vue';

export default {
  name: "AttackProcess",
  components: {Empty},
  props: {
    viewName: {
      type: String,
      required: true,
    },
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data() {
    return {
      loadingMore: false,
      imgSrc: require('@/views/attackAngle/assets/ip.png'),
      // 折叠面板选中
      collapseActive: -1,
      cardLoading: true,
      cardData: [],
      // 展开的内容
      listLoading: true,
      paging: 1,
      limit: 3,
      total: 0,
      listData: [],
    }
  },
  created() {
    this.initComp();
  },
  methods: {
    initComp() {
      console.log('攻击过程组件获取数据了------', this.datePickerValue);
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(true);
        }, 1000)
      }).then(() => {
        this.formatCardData(mockData);
      })
    },
    formatCardData(data) {
      this.cardData = data;
      this.cardLoading = false;
    },
    collapseChange(val) {
      if (!val) {
        this.listLoading = false;
        return false;
      }
      this.listData = [];
      this.getListData(true);
    },
    getListData(reset) {
      if (reset) {
        this.paging = 1;
        this.total = 0;
      }
      this.listLoading = true;
      this.listData = [];
      console.log(this.cardData[this.collapseActive - 1]);
      const params = {
        startTime: this.datePickerValue[0],
        endTime: this.datePickerValue[1],
        viewType: this.viewType,
        startPosition: this.limit * (this.paging - 1),
        maxResult: this.limit,
      }
      console.log(params);
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(true);
        }, 1000)
      }).then(() => {
        this.formatListData(mockListData);
      })
    },
    formatListData(data) {
      this.listLoading = false;
      this.listData = data;
      this.total = 15;
    },
    // 当前页
    currentChangeHandle(val) {
      this.paging = val;
      this.getListData();
    },

    handleScroll() {
      const div = this.$el; // 获取滚动容器
      const isBottom =
          div.scrollHeight - div.scrollTop === div.clientHeight;
      if (isBottom && !this.loadingMore) {
        console.log('到底部了');
      }
    }
  }
}
</script>

<style lang="scss">
.attack-process-container {
  border: 1px solid red;
  padding: 10px;
  max-height: 520px;
  overflow-y: auto;
  .el-collapse {
    border: none;

    .el-collapse-item__header, .el-collapse-item__wrap {
      border: none;
    }

    .el-collapse-item__arrow {
      color: #409EFF;
    }
  }

  .coll-card-content {
    .el-collapse-item__header {
      height: 80px;
      line-height: normal;
      background: #FBFDFF;
      border: 2px solid #F4F5F7;
      display: flex;
      align-items: center;
      font-size: 16px;
      padding: 0 20px;

      .left-box {
        flex: 0 0 50%;

        .time {
          color: #969696;
          margin-bottom: 15px;
        }

        .way {
          display: flex;
          align-items: center;

          .speak {
            font-size: 18px;
            font-weight: bold;
            margin-right: 40px;
          }
        }
      }

      .num {
        margin-right: 30px;
      }

      .unfold {
        flex: 1;
        text-align: right;
        margin-top: -3px;
        color: #409EFF;
      }
    }
  }
}
</style>

<style scoped lang="scss">
.attack-process-container {
  min-height: 200px;

  .card-list-box {
    min-height: 100px;
    padding-left: 130px;

    .list-item {
      height: 90px;
      border: 2px solid #F4F5F7;
      border-left: 5px solid red;
      display: flex;
      align-items: center;
      padding-left: 30px;

      .level {
        height: 100%;
        display: flex;
        align-items: center;
        padding-right: 100px;
        border-right: 1px solid #F4F5F7;

        .num {
          font-size: 16px;
          font-weight: bold;
          margin-right: 20px;
        }
      }

      .course {
        flex: 1;
        padding: 0 100px;
        display: flex;
        align-items: center;

        .left-ip {
          font-size: 16px;
          font-weight: bold;
        }

        .trait {
          flex: 0 0 55%;
          color: #bbb;
          margin: 0 20px;

          > div {
            text-align: center;
          }

          .arrow {
            position: relative;
            height: 2px;
            background: #bbb;
            margin: 3px 0;

            .el-icon-right {
              font-size: 16px;
              font-weight: bold;
              position: absolute;
              right: -10px;
              top: -7px;
            }
          }
        }

        .suffer {
          font-size: 16px;
          font-weight: bold;
          color: #2E7ACB;

          .image {
            display: flex;
            align-items: center;

            > img {
              width: 24px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}

</style>